<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/Dapartment.css">
    <style>
        #mulu>h4{
            font-weight: 900;
        }
        #mulu>div>span{
            margin-right: 2%;
            padding: 1% 0;
        }
        #mulu>div>span:nth-of-type(1){
            border-bottom: 1px solid rgb(24,144,255);
            color:rgb(24,144,255)
        }
        table{
            text-align: center;
        }
        thead>tr>th{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="kong11"></div>
        <div id="mulu">
            <!-- <div><span>首页</span><span>/医疗服务/</span><span>科室管理</span></div> -->
            <h4>预约查询</h4>
            <div>
                <span>预约</span>
                <span>查询</span>
            </div>
        </div>
        <div class="row neirong" id="nr1">
            <div class="col-md-10 col-md-offset-1 cha">
                <p>查询条件</p>
                <div class="row">
                    <div class="col-md-4">
                        <span class="chaspan">医生姓名:</span>
                        <input type="text" id="selyisheng" class="chainput">
                    </div>
                    <div class="col-md-3 notpad">
                        <span class="chaspan">一级科室:</span>
                        <select name="" id="selyiji" class="chainput">
                            <option value="全部">全部</option>
                            <option value="手术科室">手术科室</option>
                            <option value="非手术科室">非手术科室</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 col-md-offset-2">
                        <button onclick="reset()" class="allbtn">重置</button>
                        <button onclick="cha()" class="allbtn chabtn">查询</button>
                    </div>
                </div>
            </div>
            <div id="tdheight" class="col-md-10 col-md-offset-1 cha">
                <div class="keshi">数据列表</div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>医生姓名</th>
                            <th>科室</th>
                            <th>预约时间<span class="iconfont icon-shangxiajiantou"></span></th>
                            <th>人数上限</th>
                            <th>以约名额</th>
                            <th>剩余名额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="clear">
                    <div class="yejiao"> 共<span id="current"></span>条记录<span>&nbsp&nbsp&nbsp第 <span id="yeshu"></span>/
                            <span id="ye"></span>页</span></div>
                    <div id="shang" class="pagebtn">
                        <span class="iconfont icon-xiangzuo shangspan"></span>
                    </div>
                    <div id="fenyeanniu"></div>
                    <div id="xia" class="pagebtn"><span class="iconfont icon-xiangyou1 shangspan"></span></div>
                    <div>
                        <select name="" id="fenyeyema" class="yejiao yejiaofen" onchange="selfenye()">
                            <option value="5" class="op">5条/页</option>
                            <option value="10" class="op">10条/页</option>
                            <option value="15" class="op">15条/页</option>
                            <option value="20" class="op">20条/页</option>
                        </select>
                    </div>
                    <div class="shangspan tiaozhuan">跳转到<input type="text">页</div><button class="pagebtn"
                        id="querentiao" onclick="querentiao(this)">确认跳转</button>
                </div>
            </div>
        </div>
    </div>
    <div>
        <span class="foot1">大健康综合管理后台</span>
        <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
        <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
    </div>
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                未查询到该科室，请检查是否输入正确！
            </div>
        </div>
    </div>
    <script src="../JavaScript/data.js"></script>
    <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/utils.js"></script>
    <script>
        $('#mulu').on('click','span',function(){
            $(this).css({'border-bottom':' 1px solid rgb(24,144,255)',color:'rgb(24,144,255)'})
            $(this).siblings().css({'border-bottom':'0',color:'black'})
        })
        let maxPage
        // let dangqian=1
        let divcount = 3
        let fenyeData = aubquery
        function showTable(data) {
            $('#tdheight tbody').html('')
            $.each(data, (index, item) => {
                $('#tdheight tbody').append(`
                <tr>
                    <td>${item.name}</td>
                    <td>${item.Dep}</td>
                    <td>${item.time}</td>
                    <td>${item.limit}</td>
                    <td>${item.about}</td>
                    <td>${item.surplus}</td>
                    <td>
                        <div class="change" data-item='${JSON.stringify(item.name)}'>查看明细</div>
                        </td>
                </tr>
                `)
            })
        }
        function fenye(num, data) {
            let qishi = (num - 1) * fenyeshu
            // console.log(fenyeData)
            let jiequ = fenyeData.slice(qishi, Number(qishi) + Number(fenyeshu))
            $('.page').css({ 'background': 'white', 'color': 'black' })
            $('.page')[num - 1].style.backgroundColor = 'rgb(24, 144, 255)'
            $('.page')[num - 1].style.color = 'white'
            showTable(jiequ)
            dangqian = num
            $('#yeshu').text(dangqian)
        }
        function showPage(data) {
            $('#fenyeanniu').html('')
            maxPage = Math.ceil(data.length / fenyeshu)
            $('#ye').text(maxPage)
            for (let i = 1; i <= maxPage; i++) {
                $('#fenyeanniu').append(`
                <button class="page pagebtn">${i}</button>
                `)
            }
            // for(let i=0;i<parseInt($('.page').length);i++){
            //     if(i<divcount){
            //         $('.page')[i].style.display='block'
            //     }
            //     else{
            //         $('.page')[i].style.display='none'
            //     }
            // }
        }
        $('#fenyeanniu').on('click', '.page', function () {
            let num = parseInt($(this).text())
            fenye(num, fenyeData)
        })
        $('#current').text(fenyeData.length)
        //上一页
        $('#shang').click(function () {
            if (dangqian != 1) {
                let num = dangqian - 1
                show(num)
            }
        })
        //下一页
        $('#xia').click(function () {
            if (dangqian < maxPage) {
                let num = dangqian + 1
                show(num)
            }
        })

        function querentiao() {
            let num = $('#querentiao').prev().children('input').val()
            console.log(num)
            if (num != "" && num <= maxPage) {
                show(num)
            }
        }
        function reset() {
            $('#selyiji').val('全部')
            $('#selyisheng').val('')
        }
        function cha() {
            if ($('#selyiji').val() == '全部') {
                if ($('#selyisheng').val() != '') {
                    let data = aubquery.filter(item => item.name == $('#selyisheng').val())
                    if (data.length > 0) {
                        fenyeData = data
                    }
                    else {
                        // alert('未查询到该科室，请检查是否输入正确！')
                        $('#exampleModal2').modal('toggle')
                    }
                    $('#current').text(fenyeData.length)
                } else if ($('#selyisheng').val() == '') {
                    fenyeData = aubquery
                }
            }
            else if ($('#selyisheng').val() == '') {
                let data = aubquery.filter(item => item.Dep == $('#selyiji').val())
                fenyeData = data
                $('#current').text(fenyeData.length)
            }
            else {
                let data = aubquery.filter(item => item.Dep == $('#selyiji').val() && item.name == $('#selyisheng').val())
                if (data.length > 0) {
                    fenyeData = data
                }
                else {
                    // alert('未查询到该科室，请检查是否输入正确！')
                    $('#exampleModal2').modal('toggle')
                }
                $('#current').text(fenyeData.length)
            }
            show(1)
        }
        function show(num) {
            showPage(fenyeData)
            fenye(num, fenyeData)
        }
        show(1)
        function selfenye() {
            let tiao = $('#fenyeyema').val()
            fenyeshu = parseInt(tiao)
            show(dangqian)
        }
    </script>
</body>
</html>